<template>
  <div
    class="column-direction"
    style="height: 550px;position: relative;"
  >
    <div
      class="row-direction"
      style="height: 90%"
    >
      <div class="friend-all">
        <el-checkbox-group
          v-model="selectFriends"
          v-loading="memberLoad"
        >
          <el-collapse accordion>
            <el-collapse-item
              v-for="(orginization, index) in organizationList"
              :key="orginization.organizationId"
              :title="orginization.organizationName"
              :name="index"
            >
              <div class="friend-group">
                <div
                  class="friend"
                  v-for="friend in orginization.organizationFriendList"
                  :key="friend.friendId"
                >
                  <el-checkbox
                    class="row-direction"
                    :label="friend"
                    :checked="isInGroup(friend)"
                  >
                    <div class="name">{{defaultFriendName(friend)}}</div>
                    <img
                      class="avatar"
                      :src="friend.friendAvatar"
                    />
                  </el-checkbox>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-checkbox-group>
      </div>
      <div class="friend-Checked column-direction">
        <div
          :key="index"
          v-for="(item,index) in selectFriends"
        >
          <div class="friend-group">
            <div class="friend">
              <span
                class="delete-icon iconfont icon-close"
                @click="removeSelectedFriends(item)"
              ></span>
              <div class="name">{{defaultFriendName(item)}}</div>
              <img
                class="avatar"
                :src="item.friendAvatar"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="smVisible">取 消</el-button>
      <el-button
        class="button"
        @click="selectMembers"
      >确定</el-button>
    </div>
  </div>
</template>

<script>
import { organizationAllFriends } from '@/api/contact'
export default {
  name: 'SelectMember',
  data () {
    return {
      selectFriends: [], // checkbox的选中值数组
      organizationList: [],
      smdialogFormVisible: false,
      memberLoad: true
    }
  },
  computed: {},
  props: {
    toSelectFriend: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  mounted () {
    this.initList()
  },
  methods: {
    // 刷新列表
    initList () {
      this.handleOrganizationAllFriends()
    },
    // 好友是否在群组中
    isInGroup (friend) {
      const res = this.toSelectFriend.some(
        (val) => val.friendId === friend.friendId
      )
      return res
    },
    // 获取全部好友
    async handleOrganizationAllFriends () {
      this.memberLoad = true
      try {
        const { data } = await organizationAllFriends()
        this.memberLoad = false
        if (data) {
          this.organizationList = data
          this.memberLoad = false
        }
      } catch {
        this.memberLoad = false
      }
    },
    // 备注
    defaultFriendName (friend) {
      if (friend) {
        if (friend.friendRemark) {
          return friend.friendRemark
        } else if (friend.friendUserName) {
          return friend.friendUserName
        } else {
          return '暂无昵称'
        }
      } else {
        return '暂无昵称'
      }
    },
    // 移除选中的参会人员
    removeSelectedFriends (friend) {
      this.selectFriends.splice(
        this.selectFriends.findIndex((item) => item === friend),
        1
      )
    },
    // dialog的取消按钮
    smVisible () {
      this.$emit('smdialogVisible', this.smdialogFormVisible)
    },
    // dialog的确定按钮，确定选择的参会人员
    selectMembers () {
      this.$emit(
        'smdialogVisible',
        this.smdialogFormVisible,
        this.selectFriends
      )
    }
  }
}
</script>

<style scoped lang="scss">
$bg-color: #ffffff;
$button-color: #2953ff;
$border-color: #f1f1f1;
$font-color: #414141;
$click-color: #d5d4d4;
$hover-color: #e8e7e7;
.row-direction {
  display: flex;
  flex-direction: row;
}
.column-direction {
  display: flex;
  flex-direction: column;
}
.transfer-footer {
  margin-left: 20px;
  padding: 6px 5px;
}
.friend-all {
  display: flex;
  flex: 1;
  border-right: 1px solid $border-color;
  overflow-y: scroll;
  .el-checkbox-group {
    width: 90%;
    .el-collapse {
      border: #ffffff;
    }
    ::v-deep .el-collapse-item__header {
      width: 100%;
      font-size: 14px;
    }
  }
}
.friend-group {
  .friend {
    display: flex;
    align-items: center;
    justify-items: center;
    font-size: 14px;
    height: 60px;
    cursor: pointer;
    padding: 0 30px;
    &:last-child {
      border-bottom: 0;
    }
    &:hover {
      background-color: $hover-color;
    }
    ::v-deep label {
      display: flex;
      align-items: center;
    }
    .avatar {
      width: 40px;
      height: 40px;
      margin: 0 30px;
    }
    .name {
      width: 150px;
      margin: 0 10px;
      color: $font-color;
      font-weight: 400;
      font-size: 13px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-wrap: normal;
    }
    ::v-deep .el-checkbox__label {
      width: 90%;
      display: flex;
      flex-direction: row;
      align-items: center;
    }
  }

  .select {
    background-color: $bg-color;
    &:hover {
      background-color: $bg-color;
    }
  }
}
.friend-Checked {
  display: flex;
  flex: 1;
  overflow-y: scroll;
  .delete-icon {
    font-size: 25px;
  }
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  .button {
    background-color: #2953ff;
    color: #ffffff;
  }
}
</style>
